<template>
    <div v-for="item in 100">{{ item }}</div>

    <div class="contariner">
        <div class="header2"></div>
        <div class="header">
            <div ref="chart1" class=" chart1"></div>
            <div ref="chart2" class=" chart1"></div>
        </div>
        <div class="body">
            <div ref="chart3" class="chart2"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
import { getBrandCount ,getBrandPrice} from '../../api/chart/index'

const chart1 = ref()
const chart2 = ref()
const chart3 = ref()

const chart1Brands = ref<Array<any>>()
const chart1Nums = ref<Array<any>>()




onMounted(() => {
    var myChart = echarts.init(chart1.value);
    var myChart2 = echarts.init(chart2.value);
    // 基于准备好的dom，初始化echarts实例
    // 绘制图表
    getBrandCount().then(res => {
        chart1Brands.value = res.data.data.brands
        chart1Nums.value = res.data.data.nums

        myChart.setOption({
            title: {
                text: '各个品牌的销量'
            },
            tooltip: {},
            xAxis: {
                data: chart1Brands.value
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: chart1Nums.value
                }
            ]
        });
    })

    getBrandPrice().then(res => {


        myChart2.setOption({
            title: {
                text: '各个品牌的营业额'
            },
            tooltip: {},
            xAxis: {
                data: res.data.data.brands
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: res.data.data.prices
                }
            ]
        });
    })

})


</script>

<style scoped >
.contariner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header2 {
    height: 100px;
    background-color: rgb(173, 120, 50);
    display: flex;
    justify-content: space-between;
}
.header {
    height: 300px;
    background-color: antiquewhite;
    display: flex;
    justify-content: space-between;
}

.chart1 {
    height: 300px;
    width: 500px;

}

.body {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

.chart2 {
    height: 300px;
    width: 1000px;
    background-color: blue;
}</style>